<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="pause">暂停</button>
    <button id="start">启动</button>
</body>
<script>

    /* 
    
        计时器 => 每间隔一段时间,执行既定的内容(回调函数)
        setInterval(callback,time)   设置/启动计时器
            callback  => 把函数作为参数传入到setInterval中, 让它在setInterval函数中没间隔指定时间执行 (期望执行的内容)  => (回调函数 => 函数可以是命名函数或匿名函数)
            time     => 间隔时间

            返回值: 计时器的编号

        clearInterval(计时器的编号);  对应计时器编号清除计时器
            返回值:undefined 

        注意:
            (1) 计时器启动后,会在页面加载完毕之后开始计时, 之后每间隔指定之间之后开始执行传入的回调函数
            (2) setInterval()启动计时器之后返回计时器的编号(唯一), 后期可以对应计时器编号清除计时器 
            (3) 已经被清除的计时器无法重新启动, 但是可以开启一个新的 => 新的计时器编号
            (4) 再函数封装,事件中启动计时器, 一般情况下,需要保证同时启动一个 ( 先清除上一个 再启动下一个),否则同时启动多个,会无法清除
    
    
    */

    var start = document.getElementById("start");
    var pause = document.getElementById("pause");
    var timer = null;

    // 页面加载后,等待1s打印11111, 之后每间隔1s再次执行
    // var timer = setInterval(function () { // 1s后执行
    //     console.log(11111)
    // }, 1000);
    // console.log("打印编号", timer);


    pause.onclick = function () {
        clearInterval(timer);
    }

    start.onclick = function () {
        // 问题1: var timer = xxx  局部变量,不会影响全局
        // 问题2: 每次点击都会启动新的计时器 => timer也会被覆盖(只能记录最后一个) => 计时器无法清除
        //        保证同时启动一个
        clearInterval(timer); // 先清除上一个 再启动下一个
        timer = setInterval(function () { // 1s后执行
            console.log(11111)
        }, 1000);
        console.log("打印编号", timer);
    }










</script>

</html>